<template>
	<view class="bagBox">
		<!-- swper -->
		<view class="uni-margin-wrap">
			<!-- <image src="@/static/icons/a102.png" mode=""></image> -->
			<image class="image" src="@/static/icons/a103.png" mode=""></image>
			<view class="infos">
				<view class="left">
					<image v-if="form.mpuserAvatar" :src="baseURLImgUPD+form.mpuserAvatar" mode=""></image>
					<image v-else class="image" src="@/static/icons/logo.png" mode=""></image>
				</view>
				<view class="right" v-if="form.mpuserId">
					<view class="">{{form.mpuserNickname}}</view>
					<view class="">{{form.mpuserPhone}}</view>
				</view>
				<view class="right" v-else @click="login">
					<view class="">请先登录</view>
				</view>
				<view class="bj" @click="editInfo" v-if="form.mpuserId">编辑</view>
			</view>
		</view>
		<!--  -->
		<view class="menus-box">
			<image class="m2" src="@/static/icons/aa5.png" mode=""></image>
			<image class="m4" src="@/static/icons/aa3.png" mode=""></image>
			<image class="m3" src="@/static/icons/aa4.png" mode=""></image>
			<image class="m1" src="@/static/icons/aa1.png" mode=""></image>
			<view class="" @click="diagnosis()">一键预诊</view>
		</view>
		<!--  -->
		<!-- 精钢区 -->
		<view class="box-list" style="margin-top: 120rpx;">
			<view @click="changemenu(item.id)" class="item" v-for="(item,index) in menuslist" :key="index">
				<view class="ba_img">
					<image :src="item.url" mode=""></image>
				</view>
				<view class="font">{{item.name}}</view>
			</view>
		</view>
		
		<view class="box-list">
			<!-- <view @click="changemenu(item.id)" class="item" v-for="(item,index) in menuslist2" :key="index">
				<view class="ba_img">
					<image :src="item.url" mode=""></image>
				</view>
				<view class="font">{{item.name}}</view>
			</view> -->
			
			<view @click="changemenu(5)" class="item2" >
				<view class="ba_img2">
					<image class="img1" src="@/static/icons/cc1.png" mode=""></image>
					<image class="img2" src="@/static/icons/cc2.png" mode=""></image>
					<image class="img3" src="@/static/icons/cc3.png" mode=""></image>
				</view>
				<view class="font">用户须知</view>
			</view>
			<view @click="changemenu(6)" class="item2" >
				<view class="ba_img2">
					<image class="img1" src="@/static/icons/cc11.png" mode=""></image>
					<image class="img2" src="@/static/icons/cc22.png" mode=""></image>
					<image class="img4" src="@/static/icons/cc33.png" mode=""></image>
				</view>
				<view class="font">隐私协议</view>
			</view>
		</view>
		
		
		<zdy-tabbar :current-page="2"></zdy-tabbar>
		
	</view>
</template>

<script>
	import {infoMpUser,getHomecaseList,contentList} from '@/api/pagesApi/index.js'
	// 图片服务器
	import baseURLShowImgUP from "@/api/base.js";
	export default {
		data() {
			return {
				form:{},
				// 图片
				baseURLImgUPD: "",
				// menus
				menuslist: [{ 
						id: 1,
						name: '治疗记录',
						url: require('@/static/icons/aa30.png')
					},
					// {
					// 	id: 2,
					// 	name: '我的治疗',
					// 	url: require('@/static/icons/aa31.png')
					// },
					{
						id: 3,
						name: '收藏文章',
						url: require('@/static/icons/aa32.png')
					}, {
						id: 4,
						name: '联系我们',
						url: require('@/static/icons/aa33.png')
					},],
				list:[],
				
				phone:null,

			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onShow() {
			this.baseURLImgUPD = baseURLShowImgUP.baseURLShowImgUP;
			
			infoMpUser({
				mpuserOpenid:wx.getStorageSync('wzOpenid')
			}).then(res=>{
				this.form = res.data.data
				if(res.data.data.mpuserId){
					wx.setStorageSync('wzUid',res.data.data.mpuserId)
				}
			})
			
			
			
		},
		mounted() {
			
		},
		onLoad() {
			// this.list = []
			contentList().then(res=>{
				res.data.rows.forEach(i=>{
					if(i.contentType == 9){
						this.phone = i.contentName
					}
				})
			})
		},

		methods: {
			//编辑
			editInfo(){
				uni.navigateTo({
					url:'../../packageB/pages/my/uploads?type=1'
				})
			},
			//预诊
			diagnosis(){
				if(!wx.getStorageSync('wzUid')){
					uni.showToast({
						icon:'none',
						title:'您还未登录，请先登录'
					})
					return
				}
				uni.navigateTo({
					url:'../../packageA/pages/index/diagnosis'
				})
			},
			
			changemenu(id){
				if(id == 1 || id == 2 || id == 3){
					if(!wx.getStorageSync('wzUid')){
						uni.showToast({
							icon:'none',
							title:'您还未登录，请先登录'
						})
						return
					}
				}
				if(id == 1){
					uni.navigateTo({
						url: '../../packageA/pages/index/case/myCase'
					})
				}
				if(id == 2){
					getHomecaseList().then(res => {
						wx.setStorageSync('wzCaseid',res.data.data[0].case_id)
						uni.navigateTo({
							url: '../case/treatment'
						})
					})
					
				}
				// caseid: 11
				
				if(id == 3){
					uni.navigateTo({
						url:'../article/myArt'
					})
				}
				if(id == 4){
					uni.makePhoneCall({
						phoneNumber:this.phone
					}).catch((e)=>{
						console.log(e)
					})
				}
				
				if(id == 5){
					uni.navigateTo({
						url:'../../packageB/pages/my/userNotice'
					})
				}
				
				if(id == 6){
					uni.navigateTo({
						url:'../../packageB/pages/my/privacy'
					})
				}
				
			},
			
			login(){
				uni.navigateTo({
					url:'../../packageB/pages/my/uploads'
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.bagBox {
		width: 100%;
		min-height: calc(100vh - 40rpx);
		padding-bottom: 40rpx;
		background-color: #F6F6F6;
		position: absolute;
	}

	.uni-margin-wrap {
		height: 400rpx;
		width: 100%;
		background: #48C2B9;
		.image {
			width: 100%;
			height: 400rpx;
		}
		
		.infos{
			position: absolute;
			top: 80rpx;
			left: 80rpx;
			width: calc(100% - 160rpx);
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
			.left{
				width: 150rpx;
				height: 150rpx;
				background-color: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
			}
			.right{
				flex: 1;
				margin-left: 20rpx;
				font-size: 32rpx;
				view:first-child{
					margin-bottom: 10rpx;
					font-size: 40rpx;
				}
				
			}
			.bj{
				padding: 10rpx 40rpx;
				background-color: #fff;
				color: #16D7A8;
				border-radius: 28rpx;
			}
			
		}
	}
	.menus-box {
		width: calc(96%);
		height: 200rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		position: absolute;
		top: 280rpx;
		left: 2%;
		overflow: hidden;
		.m1{
			position: absolute;
			left: 42.43px;
			top: 10.62px;
			width: 81px;
			height: 98px;
			opacity: 1.1;
		}
		.m2{
			position: absolute;
			left: 140px;
			top: 40.62px;
			width: 127px;
			height: 127px;
			opacity: 1;
		}
		.m3{
			position: absolute;
			left: 134px;
			top: 57.62px;
			width: 45px;
			height: 45px;
			opacity: 1;
		}
		.m4{
			position: absolute;
			left: -30px;
			top: -30px;
			width: 227px;
			height: 258.62px;
			opacity: 1;
		}
		view{
			position: absolute;
			right: 20px;
			bottom: 15px;
			width: 96px;
			height: 34px;
			border-radius: 17px;
			opacity: 1;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			line-height: 34px;
			background: linear-gradient(180deg, #5AD2C9 0%, #16D7A8 100%);
		}
		
	}
	.box-list {
		width: calc(100% - 4%);
		height: 206rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	
		.item {
			width: 25%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
	
			.ba_img {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				// background-color: #3A89EB;
				background: linear-gradient(180deg, #99ECE3 0%, #04CFB2 100%);
	
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
	
			.font {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	
		.item:nth-child(2){
			.ba_img {
				background: linear-gradient(180deg, #A5E8FE 0%, #52B9F2 100%);
			}
		}
	
		.item:nth-child(3){
			.ba_img {
				background: linear-gradient(180deg, #CFE4FF 0%, #5EA2FF 99%);
			}
		}
		.item:nth-child(4){
			.ba_img {
				background: linear-gradient(180deg, #8BF7D7 0%, #27DB99 100%);
			}
		}
		
		.item2{
			width: 25%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.ba_img2 {
				width: 88rpx;
				height: 88rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.img1{
					position: absolute;
					left: calc(50% - 25rpx);
					top: 10px;
					width: 50rpx;
					height: 50rpx;
					opacity: 1;
				}
				.img2{
					position: absolute;
					left: calc(50% - 18rpx);
					top: 13px;
					width: 36rpx;
					height: 36rpx;
					opacity: 0.3;
				}
				.img3{
					position: absolute;
					left: calc(50% - 7rpx);
					top: 14px;
					width: 13rpx;
					height: 22rpx;
					opacity: 1;
				}
				.img4{
					position: absolute;
					left: calc(50% + 10rpx);
					top: 10px;
					width: 16rpx;
					height: 22rpx;
					opacity: 1;
				}
			}
			.font {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
</style>
